<template>
    <div id="studyJob">
        
        <div class="job" @click="goJobIn">
            <div class="left">
                <div class="index">1</div>
                <div>
                    <div style="font-size: 18px;font-weight: 600;margin-bottom: 15px;">任务1：项目演示和介绍</div>
                    <div style="font-size: 14px;color: #676767;">开始开发项目前，先看看和体验一下这个项目吧</div>
                </div>
            </div>
            <div class="right">
                <div style="color: #2D6EFF;">免费解锁</div>
            </div>
        </div>
        
        <div class="job" v-for="item of list" :key="item">
            <div class="left">
                <div class="index" style="background-color: #E4E4E4;">{{item.num}}</div>
                <div>
                    <div style="font-size: 18px;font-weight: 600;margin-bottom: 15px;">{{item.jobTxt}}</div>
                    <div style="font-size: 14px;color: #676767;">{{item.jobMsg}}</div>
                </div>
            </div>
            <div class="right">
                <div style="color: #E4E4E4;font-size: 35px;"><i class="el-icon-document-delete"></i></div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    'num':"2",
                    'jobTxt':'任务2：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                },
                {
                    'num':"3",
                    'jobTxt':'任务3：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                },
                {
                    'num':"4",
                    'jobTxt':'任务4：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                },
                {
                    'num':"5",
                    'jobTxt':'任务5：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                },
                {
                    'num':"6",
                    'jobTxt':'任务6：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                },
                {
                    'num':"7",
                    'jobTxt':'任务7：搭建项目开发环境',
                    'jobMsg':'通过本任务，完成项目开发环境的搭建和配置，为后续的开发做好准备',
                }]
            }
        },
        methods:{
            goJobIn(){
                this.$router.push('/studyJobIn')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/css/study/studyJob.scss';
</style>
